import React, { Component, Fragment } from 'react';
import { Button, Form, Input, message } from 'antd';

class AddDept extends Component {
  // eslint-disable-next-line no-useless-constructor,react/sort-comp
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  componentDidMount() {
    const url="http://1.94.134.166:8805/dept/list?parentId=0"
    fetch(url,{method:'GET'})
      .then((response)=>response.json())
      .then((res)=>{
        // eslint-disable-next-line no-console
        console.log(res)
        // const {data}=res;
      })
  }

  onFinish=(values)=> {
    console.log("onFinish")
    const url = "http://1.94.134.166:8805/dept";
    values.parentId=0;
    fetch(url,{
      method:'POST',
      body:JSON.stringify(values),
      headers:{
        'Content-Type':'application/json',
        Authorization:localStorage.getItem('Authorization'),
      },
    }).then((response) => response.json())
      .then((res)=>{
        console.log(res)
        const{code=0}=res;
        if (code==0) {
          // 数据添加成功后，刷新父组件数据
          this.props.refresh();
          this.props.closeDrawer();  // 关闭 Drawer
          this.formRef.current.resetFields();
        }
        message.success("新增成功")
      })
  }


  render() {
    return (
      <>
        <Form
          name="normal_login"
          className="login-form"
          onFinish={this.onFinish}
          initialValues={{
            remember: true,
          }}

        >
          <Form.Item
            name="deptName"
            // className="user"
            rules={[
              {
                required: true,
                message: '请输入部门名称',
              },
            ]}
          >
            <Input
              addonBefore="部门名称"
              // prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入部门名称"
            />
          </Form.Item>
          <Form.Item
            name="deptPy"
            rules={[
              {
                required: true,
                message: '请输入部门拼音',
              },
            ]}
          >
            <Input
              addonBefore="部门拼音"
              // prefix={<LockOutlined className="site-form-item-icon" />}
              // type="password"
              placeholder="请输入部门拼音"
            />
          </Form.Item>

          <Form.Item
            name="phone"
            // label="phone"
            rules={[
              {
                required: true,
                pattern:/^1[3-9]\d{9}$/,
                message: '请输入正确的电话号码',
              },
            ]}
          >
            <Input
              // prefix={<LockOutlined className="site-form-item-icon" />}
              addonBefore="联系电话"
              type="phone"
              placeholder="请输入电话号码"
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" >
              新增
            </Button>
          </Form.Item>
        </Form>

      </>
    );
  }
}

export default AddDept;
